<template>
  <commonTable
    rowKey="vipId"
    :columns="roomTypeTableState.columns"
    :rules="rules"
    name="userVip"
  >
    <template #form="{ record }">
      <a-form-item label="用户" name="userId">
        <h-select v-model:value="record.userId" name="user"></h-select>
      </a-form-item>
      <a-form-item label="vip等级" name="vipId">
        <h-select v-model:value="record.vipId" name="vip"></h-select>
      </a-form-item>
    </template>
  </commonTable>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import commonTable from "../../utils/CommonTable";
import { roomType } from "@/api";
import HSelect from "@/components/HSelect";

const store = useStore();
const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "用户名",
      dataIndex: "user.username",
    },
    {
      title: "手机号",
      dataIndex: "user.phone",
    },
    {
      title: "vip折扣",
      dataIndex: "vip.vipDiscount",
    },
    {
      title: "vip描述",
      dataIndex: "vip.vipDescription",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const rules = {
  userId: [{ required: true, message: "不能为空" }],
  vipId: [{ required: true, message: "不能为空" }],
};
</script>

<style scoped>
.fjlx {
  height: 100%;
}
</style>
